<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas</title>
  <link rel="stylesheet" href="./../css/style.css">
</head>
<body>
<div class="section">
  font = value <br>
  当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。
  <hr>
  textAlign = value <br>
  文本对齐选项. 可选的值包括：start, end, left, right or center. 默认值是 start。
  <hr>
  textBaseline = value <br>
  基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。
  <img src="./../img/baselines.png" alt="baseline">
  <hr>
  direction = value <br>
  文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。<br>
  <hr>
  <hr>
  <b style="color:#f00;">measureText()</b> <br>
  将返回一个 TextMetrics对象的宽度、所在像素，这些体现文本特性的属性。
</div>
<div class="wrap_400" id="canvas">

</div>
</body>
</html>

<script src="./../js/CanvasCtx.js"></script>
<script>
  function strokeText() {
    let ctx = new CanvasCtx('#canvas').ctx;
    ctx.font = '48px bold serif';
    ctx.strokeStyle = '#f00';
    ctx.lineWidth = '4';
    ctx.textBaseline = "ideographic";
    ctx.strokeText('hello,world',0,48);

    let text = ctx.measureText('hello,world'); // TextMetrics 对象
    text.width;  // 254.625
  }
  strokeText();
</script>
